<template>
  <a-card :bordered="false">
    <a-row :gutter="8">
      <a-col :span="5">
        <s-tree
          :dataSource="orgTree"
          :openKeys.sync="openKeys"
          :search="true"
          @click="handleClick"
          @add="handleAdd"
          @titleClick="handleTitleClick"></s-tree>
      </a-col>
      <a-col :span="19">
        <s-table
          ref="table"
          size="default"
          :columns="columns"
          :data="loadData"
          :alert="false"
          :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        >
          <span slot="action" slot-scope="text, record">
            <template v-if="$auth('table.update')">
              <a @click="handleEdit(record)">编辑</a>
              <a-divider type="vertical" />
            </template>
            <a-dropdown>
              <a class="ant-dropdown-link">
                更多 <a-icon type="down" />
              </a>
              <a-menu slot="overlay">
                <a-menu-item>
                  <a href="javascript:;">详情</a>
                </a-menu-item>
                <a-menu-item v-if="$auth('table.disable')">
                  <a href="javascript:;">禁用</a>
                </a-menu-item>
                <a-menu-item v-if="$auth('table.delete')">
                  <a href="javascript:;">删除</a>
                </a-menu-item>
              </a-menu>
            </a-dropdown>
          </span>
        </s-table>
      </a-col>
    </a-row>
    <EqpBoardDesing ref="modal" @ok="handleOk"/>

  </a-card>
</template>

<script>
  import STree from '@/components/Tree/Tree'
  import { STable } from '@/components'
  import EqpBoardDesing from './modules/EqpBoardDesing'
  import { getEqpTree, getEqpBoard } from '@/api/manage'

  export default {
    name: 'EqpDesign',
    components: {
      STable,
      STree,
      EqpBoardDesing
    },
    data () {
      return {
        openKeys: ['key-01'],

        // 查询参数
        queryParam: {},
        // 表头
        columns: [
          {
            title: '#',
            dataIndex: 'no'
          },
          {
            title: '看板名称',
            dataIndex: 'description'
          },
          // {
          //   title: '登录次数',
          //   dataIndex: 'callNo',
          //   sorter: true,
          //   needTotal: true,
          //   customRender: (text) => text + ' 次'
          // },
          {
            title: '状态',
            dataIndex: 'status',
            needTotal: true,
            sorter: true
          },
          {
            title: '更新时间',
            dataIndex: 'updatedAt',
            sorter: true
          },
          {
            table: '操作',
            dataIndex: 'action',
            // width: '150px',
            scopedSlots: { customRender: 'action' }
          }
        ],
        // 加载数据方法 必须为 Promise 对象
        loadData: parameter => {
          return getEqpBoard(Object.assign(parameter, this.queryParam))
            .then(res => {
              // console.log(res.result)
              return res.result
            })
        },
        orgTree: [],
        selectedRowKeys: [],
        selectedRows: []
      }
    },
    created () {
      getEqpTree().then(res => {
        this.orgTree = res.result
      })
    },
    methods: {

      handleOk () {

      },
      handleEdit (record) {
        console.log(record)
        this.$refs.modal.edit(record)
      },
      handleClick (e) {
        console.log('handleClick', e)
        this.queryParam = {
          key: e.key
        }
        this.$refs.table.refresh(true)
      },
      handleAdd (item) {
        console.log('add button, item', item)
        this.$message.info(`提示：你点了 ${item.key} - ${item.title} `)
        this.$refs.modal.add(item.key)
      },
      handleTitleClick (item) {
        console.log('handleTitleClick', item)
      },
      titleClick (e) {
        console.log('titleClick', e)
      },
      handleSaveOk () {

      },
      handleSaveClose () {

      },

      onSelectChange (selectedRowKeys, selectedRows) {
        this.selectedRowKeys = selectedRowKeys
        this.selectedRows = selectedRows
      }
    }
  }
</script>

<style lang="less">
  .custom-tree {

    /deep/ .ant-menu-item-group-title {
      position: relative;
      &:hover {
        .btn {
          display: block;
        }
      }
    }

    /deep/ .ant-menu-item {
      &:hover {
        .btn {
          display: block;
        }
      }
    }

    /deep/ .btn {
      display: none;
      position: absolute;
      top: 0;
      right: 10px;
      width: 20px;
      height: 40px;
      line-height: 40px;
      z-index: 1050;

      &:hover {
        transform: scale(1.2);
        transition: 0.5s all;
      }
    }
  }
</style>
